<template>
  <div class="root">
    <input type="text" v-model="mytext"/>
    <ul>
      <li v-for="data in showlist" :key="data">{{ data }}</li>
    </ul>
  </div>
</template>

<script>
import { reactive, toRef, toRefs, ref, computed } from "vue";
import init from './init';

export default {
  setup() {
    // 温馨提醒，如果代码过多，建议在同目录下根据情况新建若干个js文件里，然后在vue文件中引入。这样可以让vue代码更加便于维护，你也不想一个文件干出来几千行代码吧，那是真的头皮发麻啊。可以参考下本文件同级目录下的init.js。

    const mytext = ref("");
    const datalist = reactive(["11111", "22222", "33333", "4444", "55555"]);

    // 在vca模式中，comupted的第一种用法就是，传入一个回调函数，在里面return出你操作完之后的数据
    const showlist = computed(() => {
      // 数组的filter方法我就不给你复习了，不会的自己去搜吧，或者补一补js基础
      return datalist.filter((data) => data.includes(mytext.value)); 
    });

    return {
      mytext,
      datalist,
      showlist,
    };

    // 如果使用前面讲的把代码放在js文件里，就这样return，不难发现，如果使用js文件的形式，vue文件这里好像就写下面这一句就够了
    // return {
    //   ...init()
    // }
  },
};
</script>

<style scoped>
</style>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>
